<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>拓扑图在线设计器</title>
        <script type="text/javascript" src="/deng/include/include-css.js"></script>
        <script type="text/javascript" src="/deng/include/include.js"></script>
        <link rel="stylesheet" type="text/css" href="/deng/view/monitor/graph-design/grapheditor/styles/grapheditor.css">
        <style type="text/css">
            .colorpicker-element .add-on i, .colorpicker-element .input-group-addon i {
                display: inline-block;
                cursor: pointer;
                height: 34px;
                vertical-align: text-top;
                width: 40px;
            }
            .geSidebarContainer .geTitle {
                display: block;
                font-size: 10pt;
                border-bottom: 1px solid #f8f8f8;
                font-weight: normal;
                padding: 12px 0px 12px 14px;
                margin: 0px;
                cursor: default;
                background: #ffffff;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.4em;
            }
            .geToolbarContainer .geLabel {
                float: left;
                margin: 2px;
                cursor: pointer;
                padding: 3px 5px 18px 5px;
                border: 1px solid transparent;
                opacity: 0.6;
                filter: alpha(opacity=60);
            }
            .geDialog {
                position: absolute;
                background: #17a2b8;
                overflow: hidden;
                padding: 8px;
                border: 1px solid #acacac;
                -webkit-box-shadow: 0px 0px 2px 2px #fff;
                -moz-box-shadow: 0px 0px 2px 2px #fff;
                box-shadow: 0px 0px 2px 2px #fff;
                color:#fff;
                _filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#fff', Positive='true');
                z-index: 2;
            }
            .m-checkbox-list .m-checkbox, .m-checkbox-list .m-radio, .m-radio-list .m-checkbox, .m-radio-list .m-radio {
                display: inline;
            }

            .geFooterContainer {
                background: #FFF;
                border-top: 1px solid #FFF;
            }
            input{
                border: none;
                outline: none;
                border-bottom: 1px solid #ebedf2;
                border-top: 1px solid #ebedf2;
                border-left: 1px solid #ebedf2;
                border-right: 1px solid #ebedf2;
            }
            input:focus,
            input:active{
                outline: none;
                border-bottom: 1px solid #ebedf2;
                border-top: 1px solid #ebedf2;
                border-left: 1px solid #ebedf2;
                border-right: 1px solid #ebedf2;
            }

            a {
                text-decoration: none;
            }
            /*正常的未被访问过的链接*/
            a:link {
                text-decoration: none;
            }
            /*已经访问过的链接*/
            a:visited {
                text-decoration: none;
            }
            /*鼠标划过(停留)的链接*/
            a:hover {
                text-decoration: none;
            }
            /* 正在点击的链接*/
            a:active {
                text-decoration: none;
            }
            .m-checkbox.m-checkbox--state-brand.m-checkbox--solid>span {
                background: #22b9ff;
                border: 1px solid transparent!important;
            }
            .m-checkbox.m-checkbox--state-brand.m-checkbox--solid>input:checked~span {
                background: #22b9ff;
            }
            .m-radio.m-radio--state-success.m-radio--solid>input:checked~span {
                background: #22b9ff;
            }
            .m-radio.m-radio--state-success.m-radio--solid>span {
                background: #22b9ff;
                border: 1px solid transparent!important;
            }

            .m-portlet {
                -webkit-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
                box-shadow: 0 0px 0px 0px rgba(69,65,78,.08);
                background-color: #fff;
            }

            /*滚动条整体部分,必须要设置*/
            ::-webkit-scrollbar{
                width: 0px;
                height: 0px;
                background-color: #fff;
            }
            /*滚动条的轨道*/
            ::-webkit-scrollbar-track{
                box-shadow: inset 0 0 0px rgba(0,0,0,.3);
                background-color: #fff;
            }
            /*滚动条的滑块按钮*/
            ::-webkit-scrollbar-thumb{
                border-radius: 10px;
                background-color: #e0e0e0;
                box-shadow: inset 0 0 0px #000;
            }
            /*滚动条的上下两端的按钮*/
            ::-webkit-scrollbar-button{
                height: 0px;
                background-color: #fff;
            }
            html {
                /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
                -ms-overflow-style:none;
                /*火狐下隐藏滚动条*/
                overflow:-moz-scrollbars-none;
            }
            /*Chrome下隐藏滚动条，溢出可以透明滚动*/
            html::-webkit-scrollbar{width:0px}


            .flow {
                stroke-dasharray: 8;
                animation: dash 0.5s linear;
                animation-iteration-count: infinite;
            }
            @keyframes dash {
                to {
                    stroke-dashoffset: -16;
                }
            }
            .nav-tabs-vertical a.active {
                color: #7f63f4;
                border-right: 1px solid #7f63f4;
                border-top: 0;
                border-left: 0;
            }
            .nav-tabs-vertical a, .user-intro h4, .user-skill .user-info li h5 {
                margin-bottom: .5rem;
            }

            .nav-tabs a {
                text-align: left;
                padding: .9rem;
                color: #464a53;
                font-size: 1.1rem;
            }

            .tab-content {
                padding: 5px 0 0 0;
            }


            .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
                padding-right: 1px;
                padding-left: 1px;
            }

            .nav-tabs-vertical a.active {
                /*color: #fff;*/
                border-right: 1px solid #7f63f4;
                border-top: 0;
                border-left: 0;
                /*background: #7f63f4;*/
            }
            .svBtn{
                background: #f8f8f8;color: #fff;
            }
            .geSprite{
                width:40px;
            }
            td.mxPopupMenuIcon div {
                width: 25px;
            }
            .geToolbarMenu {
                border: 3px solid #22b9ff!important;
            }
           html div.mxPopupMenu {
                -webkit-box-shadow: 3px 3px 12px #22b9ff;
                -moz-box-shadow: 3px 3px 12px #22b9ff;
                box-shadow: 3px 3px 12px #22b9ff;
                border-radius: 2px;
               border: 3px solid #22b9ff;
               border-color: #22b9ff
            }
            .geEditor div.mxPopupMenu {
                box-shadow: 0 2px 6px 2px #22b9ff;
                background: white;
                border-radius: 4px;
                border: none;
                padding: 3px;
            }


            .modal-lg {
                max-width: 70%;
                width: 70%;
                max-width: none;
            }

        </style>
    </head>
    <body id="geEditor">
    <form id="BaseForm" method="post" style="display: none;">
        <div class="m-portlet__body">
            <div class="form-group m-form__group row">
                <div class="col-lg-6">
                    <input class="form-control" type="hidden" id="graph_site_id" name="graph_site_id">
                    <input class="form-control" type="hidden" id="stationId" name="stationId" >
                    <input class="form-control" type="hidden" id="graph_site_name" name="graph_site_name" >
                    <input class="form-control" type="hidden" id="graph_site_mxgraph" name="graph_site_mxgraph" >
                    <input class="form-control" type="hidden" id="imgxml" name="imgxml" >
                    <input class="form-control" type="hidden" id="w" name="w" >
                    <input class="form-control" type="hidden" id="h" name="h" >
                    <input class="form-control" type="hidden" id="gridBackGround" name="background">
                    <input class="form-control" type="hidden" id="gridColor" name="gridColor" >
                    <input class="form-control" type="hidden" id="gridSize" name="gridSize" >
                    <input class="form-control" type="hidden" id="showGrid" name="showGrid">
                </div>
            </div>
        </div>
    </form>

    <!-- 设备选择器模态框（Modal）开始 -->
    <div class="modal fade" id="pixelSelectModal" tabindex="-1" role="dialog" aria-labelledby="pixelModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" id="pixelModalDialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="pixelModalLabel">
                        绑定设备
                    </h4>
                </div>
                <div class="modal-body" id="processBody" style="overflow:auto;">
                    <div class="m-portlet">
                        <!--begin::Form-->
                        <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed"  method= "post" id="searchPixelForm">
                            <div class="m-portlet__body">
                                <div class="form-group m-form__group row">
                                    <label class="col-form-label">位置:</label>
                                    <div class="col-lg-3">
                                        <select class="form-control" id="device_location_id" name="device_location_id">
                                            <option value="">请选择</option>
                                        </select>
                                    </div>
                                    <label class="col-form-label">类型:</label>
                                    <div class="col-lg-2">
                                        <select class="form-control" id="device_type_id" name="device_type_id">
                                            <option value="">请选择</option>
                                        </select>
                                    </div>
                                    <label class="col-form-label">设备名称:</label>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control" name="name" placeholder="请输入">
                                    </div>
                                    <a href="javascript:search('pixelDataTables')" class="btn btn-light-primary font-weight-bold mr-2m-btn--custom m-btn--icon">
                                        <span><i class="fa fa-search"></i><span>检 索</span></span>
                                    </a>
                                </div>
                            </div>
                        </form>
                        <!--end::Form-->
                    </div>
                    <table id="pixelDataTables" class="table table-bordered table-striped table-hover" style="white-space: nowrap;">
                        <thead>
                        <tr>
                            <th>操作</th>
                            <th>类型</th>
                            <th>设备编码</th>
                            <th>名称</th>
                            <th>位置</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-success btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">取 消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 设备选择器模态框（Modal）结束 -->
    <div style="display:none;">
        <svg class='svgtemplate' id="svgtemplate" xmlns='http://www.w3.org/2000/svg' version='1.1' ><path id="svgtemplatePath" d='' stroke='#fff' stroke-width='2' fill='#fff'/></svg>
    </div>

    <!-- upload模态框（Modal）开始 -->
    <div class="modal fade" id="jehcImportModal" tabindex="-1" role="dialog" aria-labelledby="jehcImportModalLabel" data-backdrop="static"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="jehcImportModalLabel">

                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="jehcImportForm" method="post" enctype="multipart/form-data">
                        <input id="graphXml" name="graphXml" type="file" multiple = "false"  data-min-file-count="1" data-max-file-count="1" data-show-upload="true" data-show-preview="false"> <br>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关闭</button>
                </div>
                <!--<div class="modal-footer"></div>-->
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- upload模态框（Modal）结束 -->

    <!-- upload模态框（Modal）开始 -->
    <div class="modal fade" id="jehcLcModal" tabindex="-1" role="dialog" aria-labelledby="jehcLcModalLabel" data-backdrop="static"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="jehcLcModalLabel">
                        设置项
                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="jehcLcForm" method="post">

                    </form>
                </div>
                <!--<div class="modal-footer"></div>-->
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- upload模态框（Modal）结束 -->
    <input id='isSZ' type='hidden' value='0'>
</body>
</html>
<script>
    var dialogWating_ = showWating({msg:'正在拼命的加载中...'});
    window.onload = function () {
        closeWating(null,dialogWating_);
    }
    //用于生成uuid
    function S4() {
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }
    function guid() {
        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
    }

    /** 表单序列化成json字符串的方法  */
    // function formConvertToJson(formId) {
    //     var paramArray = $('#' + formId).serializeArray();
    //     /*请求参数转json对象*/
    //     var jsonObj={};
    //     $(paramArray).each(function(){
    //         jsonObj[this.name]=this.value;
    //     });
    //     console.log("--------",JSON.stringify(paramArray));
    //     //json对象再转换成json字符串
    //     return JSON.stringify(paramArray);
    // }
</script>
<script inline="javascript">
    mxBasePath = "/deng/view/monitor/graph-design/src";
    STYLE_PATH = "../../../deng/view/monitor/graph-design/grapheditor/styles";
    RESOURCES_PATH = "/deng/view/monitor/graph-design/grapheditor/resources";
    MXSOURCESPATH = "/deng/view/monitor/graph-design/grapheditor";
    IMAGE_PATH = "/deng/view/monitor/design/power-design/grapheditor/images";
</script>
<link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" type="text/css"/>
<script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Init.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/jscolor/jscolor.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/sanitizer/sanitizer.min.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/src/js/mxClient.js"></script>

<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/EditorUi.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Editor.js"></script>

<!-- 自定义基础 -->
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/custom/all.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/custom/cellsButton.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/custom/cellStyle.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/custom/dragAndDrop.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/custom/nodeAttribute.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/custom/validate.js"></script>

<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Sidebar.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Graph.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Shapes.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Actions.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Menus.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Format.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Toolbar.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/Dialogs.js"></script>
<script type="text/javascript" src="/deng/view/monitor/graph-design/grapheditor/js/node_common/form_info.js"></script>
<script type="text/javascript">
    // Parses URL parameters. Supported parameters are:
    // - lang=xy: Specifies the language of the user interface.
    // - touch=1: Enables a touch-style user interface.
    // - storage=local: Enables HTML5 local storage.
    // - chrome=0: Chromeless mode.
    var urlParams = (function(url){
        var result = new Object();
        var idx = url.lastIndexOf('?');
        if (idx > 0){
            var params = url.substring(idx + 1).split('&');
            for (var i = 0; i < params.length; i++){
                idx = params[i].indexOf('=');

                if (idx > 0)
                {
                    result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
                }
            }
        }
        return result;
    })(window.location.href);

    // Default resources are included in grapheditor resources
    mxLoadResources = false;
    // Extends EditorUi to update I/O action states based on availability of backend
    (function() {
        var editorUiInit = EditorUi.prototype.init;
        EditorUi.prototype.init = function() {
            editorUiInit.apply(this, arguments);
            this.actions.get('export').setEnabled(false);
            // Updates action states which require a backend
            if (!Editor.useLocalStorage) {
                mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req) {
                    var enabled = req.getStatus() != 404;
                    this.actions.get('open').setEnabled(false);
                    this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
                    this.actions.get('save').setEnabled(enabled);
                    this.actions.get('saveAs').setEnabled(enabled);
                    this.actions.get('export').setEnabled(enabled);
                }));
            }
        };
        // Adds required resources (disables loading of fallback properties, this can only
        // be used if we know that all keys are defined in the language specific file)
        mxResources.loadDefaultBundle = false;
        var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
            mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

        // Fixes possible asynchronous requests
        mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr) {
            // Adds bundle text to resources
            mxResources.parse(xhr[0].getText());
            // Configures the default graph theme
            var themes = new Object();
            themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();

            // Main
            new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
        }, function() {
            document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
        });
    })();
</script>